<template>
  <van-row>
    <van-col span="6">
      <van-sticky :offset-top="50" :z-index="0">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item v-for="(item, i) in categoryList" :key="i" class="van-ellipsis" :title="item.title"
                            @click="onClickLeftMenus(item.sort)"/>
        </van-sidebar>
      </van-sticky>
    </van-col>
<!--悬浮导航开始-->
    <nut-drag direction="y" :style="{right:'0px',top:'50px'}">
      <nut-fixednav active-text="右侧收起" un-active-text="右侧展开" :nav-list="navList" @selected="selected">
      </nut-fixednav>
    </nut-drag>
    <van-col span="18">
      <div class="product-list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <!--通告栏开始-->
            <nut-noticebar :closeMode="true" size="20px" class="notice">
              618大促即将开始 活动期间0元预约可参与抽奖 更多产品信息请持续关注！
            </nut-noticebar>

            <div v-for="(item, index) in productList" :key="index" @click="onDetail(item.id)">
              <van-card
                  :tag="item.sold_count > 1000 ? '新品' : ''"
                  :desc="item.detail"
                  :title="item.title"
                  :thumb="item.img"
              />

            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </van-col>
  </van-row>
</template>

<script>
//1.导入封装后的接口
import {getProductListAPI} from '@/api/product.js';


export default {
  name: 'ProductList',
  data() {
    return {
      sorts:0,
      myActive: false,
      activeKey: 0, //侧边栏绑定变量
      productList: [],
      categoryList: [
        {
        title: "无线耳机",
        sort: "1"
        },{
          title: "无线键盘",
          sort: "2"
        },{
          title: "显示屏",
          sort: "3"
        },
        {
          title: "电竞椅",
          sort: "4"
        },
        {
          title: "固态硬盘",
          sort: "5"
        }
      ], //商品分类列表
      category_id: null, //当前选中的商品分类id
//悬浮导航栏
      navList: [
        {
          id: 1,
          name: 'home',
          text: '首页',
          icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
        },
        {
          id: 2,
          name: 'product',
          text: '商品',
          icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
        },
        {
          id: 3,
          name:'shopcart',
          text: '购物车',
          num: 2,
          icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
        },
        {
          id: 4,
          name: 'user',
          text: '我的',
          icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
        }
      ]
      ,
      //分页
      pageIndex: 1, //页码
      pageSize: 8, //页大小 一般是固定10
      pageTotal: 0, //总页数

      //控制下拉刷新 上拉加载更多
      loading: false,
      finished: false,
      refreshing: false
    };
  },
  //在生命周期函数中调用API接口从后端取业务数据
  created() {

  },

  methods: {
    selected(item){
      var tothis = item.item.name
      this.$router.push({
        name: tothis
      })

    },
    onDetail(id) {
      this.$router.push({path: '/product/detail', query: {id: id}});//用this.$route.query接收
    },

    //点击左侧导航栏（注意传递的参数）
    onClickLeftMenus(sort) {
      this.sorts = sort;
      this.onRefresh(); //刷新商品数据
    },

    //加载商品数据（分页）
    onLoad() {
      this.pageIndex += 1; //页码加1
      //准备参数
      let params = {
        keyword: "" ,
        sort: this.sorts, //页码
        star: 0,
        cut: this.pageSize//页大小

      };
      //调用接口
      getProductListAPI(params).then(result => {
        // console.log(result); //控制台显示，可以分析返回数据的结构
        // 记住总页数

        //是否正在下拉刷新中
        if (this.refreshing) {
          this.productList = [];
          this.refreshing = false;
        }

        //获取的分页数据与原有的列表数据拼接
        if (result.data.length > 0) {
          //有数据
          this.productList = this.productList.concat(result.data);
          console.log("acccccccc")
          console.log(this.productList)
        }

        //本次加载结束
        this.loading = false;

        //判断是否加载完了
        if (this.pageIndex > this.pageTotal) {
          this.finished = true;
        }
      });
    },

    //下拉刷新
    onRefresh() {
      this.pageIndex = 0; //重置页码
      this.productList = []; //清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    }
  }
};
</script>

<style lang="less" scoped>
.product-list {
  background-color: #f9f9f9;
}

.van-sidebar {
  width: 120px;
  margin-right: 5px;

  // 样式穿透
  // vue中针对不同的样式类型(css,less,scss)有不用的样式穿透方法。
  // css 使用 >>>
  // less 使用 /deep/
  // scss 使用 ::v-deep
  /deep/ .van-sidebar-item__text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
  }
}

/deep/ .van-card__title {
  font-size: 15px;
  padding-top: 15px;
  margin-left: 10px;
  margin-bottom: 20px;
}

/deep/ .van-card__desc {
  margin-left: 10px;
  font-size: 14px;
}

/deep/ .van-card__price-currency {
  margin-left: 10px;
}

/deep/ .van-image__img {
  margin-top: 12px;
}

/deep/ .van-card__price-integer {
  margin-left: 5px;
}

/deep/ .van-card {
  padding-bottom: 10px;
  padding-top: 15px;
}

/deep/ .van-sidebar-item__text {
  font-size: 18px;
}

</style>
